<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>玉灵 QQ:7031633 Email:webrx@126.com</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
    <style>
        :focus {
            box-shadow: none !important;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="col-8 justify-content-center">
        <span class="badge bg-primary">Primary</span>
        <span class="badge bg-secondary">Secondary</span>
        <span class="badge bg-success">Success</span>
        <span class="badge bg-danger">Danger</span>
        <span class="badge bg-warning text-dark">Warning</span>
        <span class="badge bg-info text-dark">Info</span>
        <span class="badge bg-light text-dark">Light</span>
        <span class="badge bg-dark">Dark</span>
    </div>
    <div class="col-6">
        <div class="mb-3">
            <label for="tt" class="form-label">信箱</label>
            <input type="email" name="email" class="form-control" id="tt" placeholder="xxxx@126.com">
        </div>
        <div class="mb-3">
            <label for="t1" class="form-label">留言</label>
            <textarea class="form-control" name="content" id="t1" rows="3"></textarea>
        </div>
        <div class="mb-3">
            <label for="f1" class="form-label">文件</label>
            <input type="file" accept="image/png,image/gif" multiple class="form-control" name="file" id="f1" rows="3">
        </div>

        <div class="mb-3">
            <button class="btn save btn-sm btn-success">保存</button>
        </div>
    </div>
</div>
<script src="js/bootstrap/js/bootstrap.bundle.js"></script>
<script>
    let btn = document.querySelector('.save')

    btn.addEventListener('click', function () {
        let email = document.querySelector('[name=email]').value
        let content = document.querySelector('[name=content]').value
        let fd = new FormData()
        let ff = document.querySelector("input[name='file']");
        console.log(ff.files.length)
        fd.append('email', email)
        fd.append('content', content)
        fd.append('file', ff.files[0])
        fetch('/tt', {
            method: 'post',
            //body:'id=66&name=张三丰',
            //body: JSON.stringify({email,content})
            //body:`email=${email}&content=${content}`,
            //body: new FormData(document.getElementById("reg"))
            body: fd,
            //headers:{'Content-Type':'application/x-www-form-urlencoded'},
            //headers:{'Content-Type':'application/x-www-form-urlencoded'},
        }).then(res => res.json()).then(res => {
            alert(res.msg)
        }).cache(e => console.log(e))
    })
</script>
</body>
</html>
